import {PageContainer} from '@ant-design/pro-layout';
import React from 'react';
import styles from './index.less';
import ProForm, {ProFormSelect, ProFormText} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import utils from '@/utils';
import {Button, FormInstance, message, Popconfirm} from 'antd';
import ProList from '@ant-design/pro-list';
import ProDescriptions from '@ant-design/pro-descriptions';
import {ActionType} from '@ant-design/pro-table';
import LazyImage from '@/components/lazy-image/index';

const query = (searchData?: any) => {
   searchData && Object.entries(searchData).map(res => {
      if (!res[1]) {
         delete searchData[res[0]];
      }
   });
   return utils.request.get('/chromosome', {
      params: searchData
   });
};

const deleteItem = (id: number) => {
   return utils.request.delete('/chromosome/' + id);
};

export default function List() {

   const listActionRef = React.useRef<ActionType>();
   const formRef = React.useRef<FormInstance>();


   return <PageContainer className={styles.layout}
                         extra={[
                            <ProForm layout='inline'
                                     onFinish={async (value) => {
                                        listActionRef.current?.reload();
                                     }}
                                     formRef={formRef}
                                     submitter={{
                                        resetButtonProps: false,
                                        searchConfig: {
                                           submitText: '查询'
                                        }
                                     }}
                            >
                               <ProFormSelect
                                  width='sm'
                                  name='type'
                                  options={[
                                     {value: '缺失', label: '缺失'},
                                     {value: '嵌合缺失', label: '嵌合缺失'},
                                     {value: '重复', label: '重复'},
                                     {value: '嵌合重复', label: '嵌合重复'}
                                  ]}
                                  label='异常类型'
                               />
                               <ProFormSelect
                                  width='sm'
                                  name='number'
                                  options={[
                                     {value: '23', label: 'X'},
                                     {value: '24', label: 'Y'},
                                     ...new Array(22).fill(0).map((_, index) => {
                                        const value = String(index + 1);
                                        return {
                                           value: value,
                                           label: value
                                        };
                                     })
                                  ]}
                                  label='染色体号'
                               />
                               <ProFormText
                                  width='sm'
                                  name='zone'
                                  fieldProps={{
                                     addonBefore: <ProFormSelect name='zonePrefix'
                                                                 noStyle
                                                                 options={[
                                                                    {
                                                                       label: 'p带',
                                                                       value: 'p'
                                                                    },
                                                                    {
                                                                       label: 'q带',
                                                                       value: 'q'
                                                                    }
                                                                 ]}
                                     />
                                  }}
                                  label='区带位置'
                               />
                            </ProForm>
                         ]}
   >
      <ProCard className={styles.content}>
         <ProList
            actionRef={listActionRef}
            request={async () => {
               const {data} = await query(formRef.current?.getFieldsValue());
               return Promise.resolve({
                  data: data,
                  success: true
               });
            }}
            showActions='always'
            renderItem={(item) => {
               return <>
                  <ProDescriptions column={1}
                                   key={item.id}
                                   extra={
                                      <Popconfirm title='确定删除吗'
                                                  onConfirm={async () => {
                                                     await deleteItem(item.id);
                                                     message.success('删除成功', 0.8);
                                                     listActionRef.current?.reload();
                                                  }}
                                      >
                                         <Button type='link'>删除</Button>
                                      </Popconfirm>}
                                   size='middle'
                                   layout='horizontal'
                                   labelStyle={{width: '150px'}}
                                   title={'染色体 ' + (item.number > 22 ? item.number === 23 ? 'X' : 'Y' : item.number)}
                                   className={styles.contentList}
                                   bordered
                                   dataSource={item}
                                   columns={[
                                      {
                                         title: '异常类型',
                                         dataIndex: 'type'
                                      },
                                      {
                                         title: '染色体号',
                                         dataIndex: 'number',
                                         renderText: () => {
                                            return '染色体 ' + (item.number > 22 ? item.number === 23 ? 'X' : 'Y' : item.number);
                                         }
                                      },
                                      {
                                         title: '区带位置',
                                         render: (_, entity) => {
                                            return String(entity.zonePrefix || '') + '-' + entity.zone;
                                         }
                                      },
                                      {
                                         title: '嵌合比例',
                                         dataIndex: 'chimericProportion',
                                         renderText: (text) => {
                                            return text ? text + '%' : '非嵌合';
                                         }
                                      },
                                      {
                                         title: '可靠性',
                                         dataIndex: 'callRate',
                                         valueType: 'percent'
                                      },
                                      {
                                         title: '异常图片',
                                         render: (dom, entity) => {
                                            return <LazyImage id={entity.id} />;
                                         }
                                      }
                                   ]}
                  />
               </>;
            }}
         >
         </ProList>
      </ProCard>
   </PageContainer>;
}
